﻿<html>
<head>
    <title></title>
	<script language="JavaScript" src="scripts/jquery-1.4.2.min.js"></script>
	<script language="JavaScript" src="scripts/json2.js"></script>
    <script type="text/javascript">
		var bg = chrome.extension.getBackgroundPage();

		function deleteList(){
			if (confirm("Do you wan't to delete the bookmarks from cookies?"))
				localStorage[bg.STR_UNREADED_LIST] = null;
		}

		function saveToList(){
			var unreadedList = {};
			unreadedList = eval('(' + $('#unreadedList').val() + ')');

			for (var i in unreadedList) {
				var linkTab = unreadedList[i];

				chrome.bookmarks.create({'parentId': bg.lrlBmId,
										 'title': linkTab.title,
										 'url': linkTab.url
										});
			}
		}

		function updateOptions(){
			$('#unreadedList').text(JSON.stringify(bg.unreadedList));
			$('#pagesCounter').html(localStorage[bg.STR_UNREADED_COUNT]);
			$('#pagesOID').html(localStorage[bg.STR_UNREADED_OID]);
			$('#opt_delonread').attr('checked', bg.opt_getDelOnRead());
			$('#opt_delonread').click(function (){
				bg.opt_setDelOnRead($('#opt_delonread').is(':checked'));
			});
			$('#txtshortcut').val(getStringByShortcutCode(localStorage[bg.STR_SHORTCUT]));
			$('#txtshortcut').attr("disabled", true);
			//~ $('#txtshortcut').val(localStorage[bg.STR_SHORTCUT]);
		}

		function keyUpEventListener(e)
		{
			var shortcutCode = (+e.ctrlKey) + "" + (+e.shiftKey) + "" + (+e.altKey) + e.which;

			localStorage[bg.STR_SHORTCUT] = shortcutCode;
			document.removeEventListener('keyup', keyUpEventListener);

			updateOptions();
			$('#reload').attr('style','color:red');
		}

		function createShortcut(elem)
		{
			document.addEventListener('keyup', keyUpEventListener);
			$('#txtshortcut').removeAttr("disabled");
			$('#txtshortcut').val('press shortcut keys...');
		}

		function getStringByShortcutCode(shortcutCode)
		{
			var shortcut = "";

			if(shortcutCode.length >= 4)
			{
				shortcut += shortcutCode.charAt(0) == "1" ? "CTRL+" : "";
				shortcut += shortcutCode.charAt(1) == "1" ? "SHIFT+" : "";
				shortcut += shortcutCode.charAt(2) == "1" ? "ALT+" : "";
				shortcut += String.fromCharCode(shortcutCode.substring(3));
			}

			return shortcut;
		}

		$(document).ready(function(){
			updateOptions();
		});
    </script>
	<style>
		body{
			font-family: arial, sans-serif;
			font-size: 13;
		}

		.link
		{
			color: #24B;
			cursor: pointer;
			text-decoration: underline;
		}
	</style>
</head>

<body>
	<table border="0" width="500px">
		<tbody>
			<tr>
				<td>
					<u>Options</u>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" id="opt_delonread" value="bar" /> Check if you want to delete the page after you click it for read.
				</td>
			</tr>
			<tr>
				<td><hr></td>
			</tr>
			<tr>
				<td>Add page shortcut: <input type="textbox" id="txtshortcut" />&nbsp;<span class="link" onclick="createShortcut();">edit</span><br/><span id="reload" style="color:red;display:none">You must reload all the opened tabs to apply the new keyboard shortcuts</span></td>
			</tr>
			<tr>
				<td><hr></td>
			</tr>
			<tr>
				<td>
					Pages to read (JSON)<br>
					You can copy this for backup purpose. Then you can paste it here and click "Save" to restore the backup.
					<textarea id="unreadedList" rows="10" cols="80">

					</textarea>
					<input type="button" onclick="saveToList()" value="Convert to bookmark!">
					<input type="button" onclick="deleteList()" value="Delete bookmarks from cookie">
				</td>
			</tr>
			<!--<tr>
				<td><hr></td>
			</tr>
			<tr>
				<td>
					<u>Debug info</u>
				</td>
			</tr>
			<tr>
				<td>
					Pages counter: <label id="pagesCounter"></label>
				</td>
			</tr>
			<tr>
				<td>
					Pages actual OID: <label id="pagesOID"></label>
				</td>
			</tr>-->
		</tbody>
	</table>

</body>
</html>
